<template>
  <div class="app-container contacts-wrap">
    <div class="page-header">
      <div class="page-title">
        <div class="title">发票管理</div>
        <el-input v-model="params.search" placeholder="姓名/手机/电话" class="search-input">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="btnSearch"></i>
        </el-input>

      </div>
      <div class="header-right">
        <el-button style="background: #204EC4;" type="primary" @click="addInvoice"><i class="el-icon-plus"
            style="margin-right: 10px;"></i>新建发票</el-button>
        <!-- <el-button style="color: #204EC4;" @click="clickDuplicateCheck">查重</el-button> -->
        <el-button style="padding: 0 !important;" @click="clickImport"><svg-icon icon-class="import" class="import" /></el-button>
        <el-button style="padding: 0 !important;" @click="clickExport"><svg-icon icon-class="exporter" class="import" /></el-button>
      </div>
    </div>
    <div class="shadowShell">
      <div class="search-box">
        <el-button v-if="showdeleteBtn"
          style="height:32px;margin-right: 10px;color: #5A607F !important;background-color: rgba(243,244,249,0.9) !important;border-radius: 4px !important;border: 1px solid rgba(243,244,249,0.9);"
          @click="deleteRow()">
          <i class="el-icon-delete"></i>
        </el-button>

        <el-select v-if="openScreen" v-model="value" placeholder="请选择" style="width:150px;margin-right: 10px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <div class="options-wrap">
          <el-button v-for="item in invoiceList.filter((res) => res.isSystem != 0)" :key="item.id"
            :class="avtiveInvoiceId == item.id ? 'activeScene' : 'scene'" @click="sceneClick(item, 'clearSceneName')">
            {{ item.name }}
          </el-button>

          <el-dropdown trigger="click" style="margin-left: 10px;">
            <el-button size="small" :class="activeSceneName ? 'activeScene' : 'scene'">
              {{ activeSceneName }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="commonDropdown">
              <el-dropdown-item v-for="item in invoiceList.filter((res) => res.isSystem != 1)" :key="item.id"
                :class="avtiveInvoiceId == item.id ? 'activeScene' : 'scene'"
                @click.native="sceneClick(item, 'setSceneName')">
                {{ item.name }}
              </el-dropdown-item>
              <el-dropdown-item class="last" @click.native="setScene()">
                <i class="el-icon-s-tools"></i>
                <span>场景设置</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- 筛选 -->
        <div style="margin-top: -3px;">
          <table-header-filters ref="tableHeaderFilters" @changeState="changeFlagState" @filter-change="filterChange" :addType="addType" />
        </div>
      </div>

      <!-- 表格 -->
      <div  class="clueTable">
        <clueTable ref="clueTable" @selection-change="getRow" :headData="headData" :tableData="tableData"
        @showFilter="showFilter" @showDrawer="showDrawerFun" :total="total" @pagination="pagination" @star="starInvoice" :loadding="loadding"  />
      </div>
    </div>
    <!-- 抽屉 -->
    <invoiceDrawer ref="invoiceDrawer" @refreshList="refreshList" @drawerInfo="drawerInfo"></invoiceDrawer>
    <!-- 新建合同 -->
    <addDialog ref="addDialog" :action="createAction" @saveSubmit="saveSubmit" :addType="addType" dialogTitle="新建发票" />
    <!-- 查重 -->
    <!-- <duplicateCheck ref="duplicateCheck" @save-duplicate-check="saveDuplicateCheck" duplicateCheckTitle="联系人查重"></duplicateCheck> -->
    <!-- 场景 -->
    <sceneDialog ref="sceneDialog" :tabs="tabs" :addType="addType" @RefreshScene="RefreshScene" />
    <!-- 导入 -->
    <GlobalImport ref="GlobalImport"></GlobalImport>
    <!-- 导出 -->
    <GlobalExport ref="GlobalExport"></GlobalExport>
  </div>
</template>
<script>
//api
import { getInvoiceList, getInvoiceListHead, queryInvoicePageList, addInvoice, deleteByIds, updateInvoice, starInvoice } from "@/api/invoice/invoice";
import { queryScene, queryListHead } from "@/api/customer/common";
//新增
import addDialog from '@/components/DialogCustom/addDialog.vue'
//查重
// import duplicateCheck from '@/components/duplicateCheck/index.vue'
//Table表格
import clueTable from '@/components/clueManage/clues/clueTable'
//高级搜索
import TableHeaderFilters from '@/components/FieldFilters/TableHeaderFilters'
//抽屉
import invoiceDrawer from '@/components/invoiceDrawer/index'
//场景管理
import sceneDialog from '@/components/DialogCustom/sceneDialog.vue'
//全局导入
import GlobalImport from '@/components/GlobalImportExport/GlobalImport.vue'
//全局导出
import GlobalExport from '@/components/GlobalImportExport/GlobalExport.vue'


export default {
  components: { TableHeaderFilters, clueTable, sceneDialog, invoiceDrawer, GlobalImport, GlobalExport, addDialog },
  data() {
    return {
      loading: false,
      invoiceList: [],
      tabs: [],
      avtiveInvoiceId: "1666713333092839424",
      activeSceneName: "场景名称",
      openScreen: false,
      total: 0,
      //合同数据
      tableData: [],
      headData: [],
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      addType: this.$GlobalStatus.tableType.Invoice,
      showdeleteBtn: false,
      rowList: [],
      rowIds: [],
      params: {
        search: '',
        // poolId: 1,
        sceneId: undefined,
        label: this.$GlobalStatus.tableType.Invoice,
        // sortField: "1",
        // order:1,
        pageNum: 1,
        pageSize: 10,
      },
      loadding:true
    };
  },
  mounted() {
    this.queryTabs()
    this.getField()
    this.queryList()
    this.queryListHead();
  },
  methods: {
    showFilter(row) {
      this.$refs.tableHeaderFilters.showFilterClick(row);
    },
    //查重
    saveDuplicateCheck() {

    },
    queryListHead() {
      queryListHead(this.addType).then(res => {
        this.headData = res.data;
      }).catch(error => {

      })
    },

    pagination(pageNum) {
      this.params.pageNum = pageNum;
      this.queryList();
    },
    getRow(val) {
      this.rowList = val
      if (val.length > 0) {
        this.showdeleteBtn = true
      } else {
        this.showdeleteBtn = false
      }
      this.rowIds = [];
      this.rowList.forEach(element => {
        this.rowIds.push(element.id)
      });
    },

    drawerInfo(type, id) {
      if (type == "1") {
        //打印
        // this.deleteRow(id);
      }
      if (type == "2") {
        //删除
        this.deleteRow(id);
      }
    },

    //删除row
    deleteRow(id) {
      //console.log(this.rowList)
      let title = "确定删除选中数据吗?";
      if (id) {
        title = "确定删除该数据吗?";
      }
      if (id) {
        title = "确定删除该数据吗?";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let params = {
            ids: this.rowIds
          }
          let loading = undefined
          if (id) {
            params.ids = [id]
            loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
          }
          deleteByIds(params).then(res => {
            this.loading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            if (id) {
              params.ids = [id];
              this.$refs.invoiceDrawer.close();
            }
            if (loading) {
              loading.close();
            }
            this.queryList();
          }).catch(error => {
            this.loading = false;
            if (loading) {
              loading.close();
            }
          });

        })
        .catch(() => {
          this.loading = false;
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
    getField() {
      //新建字段
      this.loading = true;
      getInvoiceList(this.addType).then(res => {
        // console.log(res)
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      })
      //表格head数据
      getInvoiceListHead(this.addType).then(res => {
        this.headData = res.data
        this.loading = false;
        // console.log(this.headData)
      }).catch(error => {
        this.loading = false;
      })
    },
    RefreshScene() {
      this.queryTabs();
    },
    queryList() {
      queryInvoicePageList(this.params).then(res => {
        console.log("表格数据" + res.data)
        this.tableData = res.data.records;
        this.loadding=false
        this.total = Number(res.data.total);
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      })
    },
    queryPage(queryPage) {
      this.queryList();
    },
    titleClick() { },
    //场景
    setScene() {
      this.$refs.sceneDialog.showFun();
    },
    //获取场景head
    queryTabs() {
      console.log(this.addType)
      // debugger
      queryScene(this.addType).then(res => {
        console.log(res.data)
        this.invoiceList = res.data;
        this.tabs = this.sceneList;
        this.avtiveInvoiceId = this.tabs[0].id
        this.activeSceneName = this.tabs[0].isSystem == 1 ? '' : this.tabs[0].name;
      }).catch(error => {

      })
    },
    //点击场景
    sceneClick(item) {
      // console.log(item)
      // console.log(this.params)
      this.params.sceneId = item.id;
      this.queryListHead();
      this.queryList();
      this.avtiveInvoiceId = item.id
      this.activeSceneName = item.isSystem == 1 ? '' : item.name;
    },
    //显示抽屉 点击客户名称
    showDrawerFun(val, type) {
      if (type == 'contractId') {
        console.log("11111", val)
      } else if (type == 'invoiceApplyNumber') {
        console.log("22222", val)
        this.$refs.invoiceDrawer.show(val);
      } else if (type == 'customerId') {
        console.log("33333", val)
      } else {

      }
    },

    cellClass({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'merchantNum') {
        return 'look--underline'
      } else {
        return ''
      }
    },

    //查重
    clickDuplicateCheck() {
      this.$refs.duplicateCheck.visible = true
    },
    // 新建合同
    addInvoice() {
      this.createAction = {
        type: 'save',
        id: '',
        data: {}
      }
      this.$refs.addDialog.showFun();
    },
    //保存
    saveSubmit(params) {
      console.log(params)
      this.loading = true;
      addInvoice(params).then(res => {
        this.loading = false;
        this.queryList();
        this.$refs.addDialog.closeFun();
      }).catch(error => {
        this.loading = false;
      })
    },
    //关注
    starInvoice(row) {
      starInvoice(row.id).then(res => {
        if (res.code == 0) {
          this.$refs.clueTable.toggleStarOk(row);
        }
      }).catch(error => {

      });
    },
    //查重
    duplicateCheck() {

    },

    //展开折叠
    collapseHandle() {
      // const exportFieldsShow = show !== undefined ? show : !this.exportFieldsShow
      // if (exportFieldsShow !== this.exportFieldsShow) {
      //   this.exportFieldsShow = exportFieldsShow
      //   //  true：是折叠不请求数据 更新table高度
      //   this.$emit('event-change', 'export-fields-collapse', this.exportFieldsShow)
      // }
      // this.$emit('filter-change', {}, true)
      // this.updateFilterConfig()
      this.sfOpen = !this.sfOpen;
    },

    //高级筛选
    filterChange(formList) {
      this.params.searchList = formList;
      this.queryList();
    },

    //更新下拉状态
    changeFlagState(val) {
      this.openScreen = val
    },
    //导入
    clickImport() {
      console.log("123")
      this.$refs.GlobalImport.showCRMImport = true
    },
    //导出
    clickExport() {
      console.log("123")
      this.$refs.GlobalExport.showCRMExport = true
    },
    //刷洗列表
    refreshList() {
      this.queryList()
    },
    //搜索框搜索
    btnSearch() {
      this.queryList();
    },

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/pageStyle.scss";

.contacts-wrap {
  .page-header {
    .page-title {
      display: flex;
      align-items: center;

      .title-icon {
        color: #42526e;
        cursor: pointer;
        margin-left: 4px;
        font-size: 16px;
      }
    }

    .header-right {
      .more {
        margin-left: 8px;
      }
    }
  }

  .search-box {
    .options-wrap {
      display: inline-block;
      // margin-left: 24px;

      >div {
        display: inline-block;

        .el-button {
          margin-right: 8px;
        }
      }

      .options-label {
        margin-right: 8px;
      }
    }

    .senior-scene {
      margin-top: 8px;
      padding: 16px;
      box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25),
        0 0 1px rgba(9, 30, 66, 0.31);

      .senior-scene-title {
        color: #5e6c84;
      }

      .senior-scene-btn-wrap {
        margin-top: 10px;
      }
    }
  }
}</style>